<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入 http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>
</head>

<body>
<div id="app" class="box">
    <h2>Login</h2>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户">
            <el-select v-model="form.region" placeholder="请选择登录用户">
                <el-option label="H" value="hjw"></el-option>
                <el-option label="Z" value="zmn"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    // 使用httpVueLoader
    Vue.use(httpVueLoader);
    new Vue({
        el: '#app',
        data() {
            return{
                form: {
                    region: '',
            },
            value: ''
            }
        },
        methods: {
            onSubmit() {
                axios.get('http://localhost:8080/login/clock?user='+this.$data.form.region)
                    .then((res) => {
                        console.log("返回信息",res)
                        this.$message({
                            message: '打卡成功',
                            type: 'success'
                        });
                    })
                    .catch((res) => {
                        console.log(res)
                    })
            },
        },
        components: {}
    })
</script>

</html>